<template>
  <div class="volunteerItem" @click="handleClick(item)">
    <div class="title">{{ item.title }}</div>
    <img
      class="star-icon"
      v-if="item.isCollect == 1 && !showCheck"
      :src="starFill"
      alt=""
    />
    <div class="content">
      <div class="info">
        <div class="item">
          {{ item.totalSelectNum }}/{{ item.totalVolunteerNum }}
        </div>
        <div class="item">{{ provinceName }}</div>
        <div class="item">{{ cateTypeMap[item.cateType] }}</div>
        <div class="item">{{ subjectName }}</div>
        <div class="item">{{ item.score }}分</div>
        <div class="item">{{ item.rankNum }}名</div>
      </div>
    </div>
    <div class="college-list">
      <div
        class="college-item"
        v-for="(item, index) in item.volunteerGroupList"
        :key="index"
      >
        <span v-if="item.collegeInfo?.name"
          >{{ index + 1 }}. {{ item.collegeInfo?.name }}</span
        >
      </div>
    </div>
    <div class="time">{{ item.updateTime }}</div>
    <div class="check" v-if="showCheck">
      <img :src="item.checked ? check : uncheck" class="checkImg" alt="check" />
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useVolunteerStore } from '@/store/volunteer';
import check from '@/assets/images/selected.png';
import { changeVolunteerUse } from '@/api/volunteer';
import uncheck from '@/assets/images/unselected.png';
import starFill from '@/assets/images/starFill.png';
import provinceData from '@/utils/provinceData';
import { subjectMap } from '@/utils/subjectData';

const props = defineProps({
  item: {
    type: Object,
    default: () => {},
  },
  showCheck: {
    type: Boolean,
    default: true,
  },
});

const router = useRouter();
const route = useRoute();
const store = useVolunteerStore();

const cateTypeMap = {
  //  这个不需要改就这样
  30: '本科',
  10: '专科',
};

const subjectNameMap = {
  11: '物',
  12: '历',
  13: '生',
  14: '化',
  15: '政',
  16: '地',
};
const subjectName = ref('');
const provinceName = ref('');
watch(
  () => props.item,
  (newVal) => {
    if (newVal.subject) {
      const subjectNameArr = newVal.subject.split(',');
      subjectName.value = subjectNameArr
        .map((item) => subjectNameMap[item])
        .join('/');
    }
    if (newVal.regionId) {
      provinceName.value = provinceData.find(
        (item) => item.code == newVal.regionId
      )?.name;
    }
  },
  {
    deep: true,
    immediate: true,
  }
);
const handleClick = (item) => {
  if (props.showCheck) {
    props.item.checked = !props.item.checked;
  } else {
    changeVolunteerUseFn(item);
  }
};
const changeVolunteerUseFn = async (item) => {
  const params = {
    volunteerId: item.volunteerId,
  };
  const res = await changeVolunteerUse(params);
  if (res.code == 200) {
    jumpToDetail(item);
  }
};
const getProvinceName = (code) => {
  return provinceData.find((item) => item.code == code)?.name;
};

const jumpToDetail = (item) => {
  const temp = store.provinces.find((_item) => _item.value == item.regionId);
  const subjectType = getSubjectType(temp, item);
  const params = {
    relSubject: item.subject,
    subjectTypeDesc: getSubjectName(item.subject),
    subjectType: subjectType,
    score: item.score,
    position: item.rankNum,
    regionId: item.regionId,
    regionName: getProvinceName(item.regionId),
    schoolLevelName: item.cateType == 30 ? '本科' : '专科',
    batchType: item.batchType,
    planYear: temp?.planYear,
  };
  store.setVolunteerInfo(params);
  router.push({
    path: '/volunTeerDetail',
  });
};

const getSubjectType = (province, item) => {
  if (province.type == 1) {
    return item.subject.split(',')[0];
  } else if (province.type == 2) {
    return '10'; // 文理不限  10
  } else {
    return '';
  }
};

const getSubjectName = (...ids) => {
  // 处理参数：扁平化 + 拆分逗号分隔的字符串
  const idArray = ids
    .flatMap((id) => {
      // 如果是字符串且包含逗号，分割成数组并去除空格
      if (typeof id === 'string' && id.includes(',')) {
        return id.split(',').map((s) => s.trim());
      }
      return id;
    })
    .flat(Infinity) // 彻底扁平化嵌套数组
    .map((id) => Number(id)) // 转为数字
    .filter((id) => !isNaN(id) && subjectMap[id]); // 过滤无效和非映射 ID

  // 获取学科全名并用中文顿号连接
  const result = idArray.map((id) => subjectMap[id]).join('、'); // 中文顿号分隔

  return result;
};

const queryInfo = ref({}); // 初始化为空对象
onMounted(() => {
  queryInfo.value = route.query;
});
</script>

<style scoped lang="scss">
.volunteerItem {
  flex: 1;
  min-width: 0; /* 关键：允许flex项目收缩到内容宽度以下 */
  border-radius: 16px;
  padding: 32px;
  background-color: #fff;
  position: relative;
  .title {
    height: 42px;
    font-weight: bold;
    font-size: 32px;
    color: #000000;
    line-height: 42px;
    margin-bottom: 16px;
  }
  .star-icon {
    position: absolute;
    right: 24px;
    top: 24px;
    width: 32px;
    height: 32px;
  }
  .content {
    display: flex;
    .info {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      font-size: 26px;
      color: #333;
      margin-bottom: 24px;
      .item {
        margin-right: 15px;
        &:first-child {
          background: #f0f0f0;
          border-radius: 6px;
          padding: 8px 15px;
          color: #666666;
          flex-shrink: 0;
        }
      }
    }
  }
  .college-list {
    width: 100%;
    .college-item {
      width: 53%;
      max-width: 100%;
      text-overflow: ellipsis;
      overflow: hidden;
      white-space: nowrap;
      font-size: 26px;
      color: #999;
      margin-bottom: 10px;
    }
  }
  .time {
    position: absolute;
    right: 24px;
    bottom: 24px;
    line-height: 18px;
    font-weight: 400;
    font-size: 26px;
    color: #999999;
    line-height: 33px;
    text-align: right;
  }
}
.check {
  position: absolute;
  right: 32px;
  top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  .checkImg {
    width: 44px;
    height: 44px;
  }
}
</style>
